 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

 <template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-input
          v-model="name"
          size="mini"
          placeholder="请输入名称"
        ></el-input>
      </el-col>
       <el-col :span="6">
        <el-select v-model="shopId" placeholder="请输入门店">
          <el-option
            v-for="t in types"
              :key="t.id"
              :label="t.name"
              :value="t.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <!-- <el-input v-model="roleId" size="mini"  placeholder="请输入编号"></el-input> -->
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="insert"
          >新增</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="flush()"
          icon="el-icon-refresh"
          >刷新</el-button
        >
      </el-col>
      <el-col :span="8"> </el-col>
    </el-row>
    <el-row>
      <!--功能列表-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="名称" >
        </el-table-column>
        <el-table-column prop="shopName" label="门店" >
        </el-table-column>
        <el-table-column prop="platform" :formatter="getStatusName" label="使用平台">
        </el-table-column>
        <el-table-column prop="count" label="数量" >
        </el-table-column>
        <el-table-column prop="perLimit" label="限领张数" >
        </el-table-column>
        <el-table-column prop="minPoint" :formatter="getmin" label="使用门槛">
        </el-table-column>
        
         <el-table-column prop="startTime" label="开始时间" >
        </el-table-column>
         <el-table-column prop="endTime" label="结束时间" >
        </el-table-column>
         <el-table-column prop="useType" :formatter="getusetype" label="使用类型">
        </el-table-column>
        <el-table-column prop="publishCount" label="发行数量">
        </el-table-column>
        <el-table-column prop="useCount" label="已使用数量" >
        </el-table-column>
        <el-table-column prop="receiveCount" label="领取数量" >
        </el-table-column>
        <el-table-column prop="enableTime" label="可领取日期" >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150px">
          <template slot-scope="scope">
           
            <el-button size="mini" @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <el-row>
      
        <!--新增或更新弹出框-->
        <el-dialog title="新增或更新" :visible.sync="updateFormVisible">
          <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="门店" :label-width="formLabelWidth">
            <el-select v-model="form.shopId" placeholder="请选择">
            <el-option
              v-for="t in types"
              :key="t.id"
              :label="t.name"
              :value="t.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
            <el-form-item label="使用平台" :label-width="formLabelWidth">
              <el-radio v-model="form.platform" :label="0">全部</el-radio>
              <el-radio v-model="form.platform" :label="1">移动</el-radio>
              <el-radio v-model="form.platform" :label="2">PC</el-radio>
            </el-form-item>
              <el-form-item label="数量" :label-width="formLabelWidth">
              <el-input v-model="form.count" autocomplete="off"></el-input>
             </el-form-item>
              <el-form-item label="限领数量" :label-width="formLabelWidth">
              <el-input v-model="form.perLimit" autocomplete="off"></el-input>
             </el-form-item>
               <el-form-item label="开始时间" :label-width="formLabelWidth">
              <el-input  type="date" v-model="form.startTime" autocomplete="off"></el-input>
             </el-form-item>
              <el-form-item label="结束时间" :label-width="formLabelWidth">
              <el-input  type="date" v-model="form.endTime" autocomplete="off"></el-input>
             </el-form-item>
               <el-form-item label="使用类型" :label-width="formLabelWidth">
              <el-radio v-model="form.useType" :label="0">全场通用</el-radio>
              <el-radio v-model="form.useType" :label="1">指定分类</el-radio>
              <el-radio v-model="form.useType" :label="2">指定车辆</el-radio>
            </el-form-item>
             <el-form-item label="发行数量" :label-width="formLabelWidth">
              <el-input v-model="form.publishCount" autocomplete="off"></el-input>
             </el-form-item>
              <el-form-item label="已使用数量" :label-width="formLabelWidth">
              <el-input v-model="form.useCount" autocomplete="off"></el-input>
             </el-form-item>
              <el-form-item label="领取数量" :label-width="formLabelWidth">
              <el-input v-model="form.receiveCount" autocomplete="off"></el-input>
             </el-form-item>
              <el-form-item label="可领取日期" :label-width="formLabelWidth">
              <el-input type="date" v-model="form.enableTime" autocomplete="off"></el-input>
             </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertorupdate()">确 定</el-button>
          </div>
        </el-dialog>
        
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: "",
      name: "",
      shopId: "",
      updateFormVisible: false, //添加或更新对话框是否显示
      form: {}, //添加或者更新form
      types:[],
      formLabelWidth: "120px",
   
    };
  },
  created: function () {
    this.load();
  },
  methods: {
    //初始化数据
    load() {
      var _this = this;
      //页面初始化时，加载的方法
      this.$http
        .get("http://localhost:9999/mks/coupon/selectAll", {
          params: {
            pageNo: this.currentPage,
            pageSize: this.pageSize,
            name:this.name,
            shopId:this.shopId
          
          },
        })
        .then((response) => {
          console.log("..33333333333..." + response.data);
          _this.tableData = response.data.data.list;
          _this.total = response.data.data.total;
        });
         this.$http
        .get("http://localhost:9999/mks/coupon/queryAllShop")
        .then((response) => {
          _this.types = response.data.data;
        });
    },
     

    //返回状态
    getStatusName(row, column, cellValue) {
     var platform = "";
      if (cellValue == 0) {
       platform = "全部";
      } else if (cellValue == 1) {
       platform = "移动";
      } else {
        platform = "pc";
      }
      return platform;
    },
    getusetype(row, column, cellValue) {
       var useType = "";
      if (cellValue == 0) {
       useType= "全场通用";
      } else if (cellValue == 1) {
       useType = "指定分类";
      } else {
        useType = "指定车辆";
      }
      return useType;
    },
    getmin(row, column, cellValue){
       var minPoint = "";
      if (cellValue == 0) {
       minPoint= "无门槛";
      }
      return minPoint;
    },
    //每页显示数量发生变化
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load();
    },
    //第几页发生变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.load();
    },
   
    //跳转更新
    toEdit(val) {
      var _this = this;
      this.$http
        .get("http://localhost:9999/mks/coupon/selectOne", {
          params: {
            id: val.id,
          },
        })
        .then((response) => {
            console.log("6666666" + response.data.data);
          _this.form = response.data.data;
        });

      this.editProState = true;
      this.updateFormVisible = true;
    },
    insert(){
      this.form={minPoint:0}
        this.updateFormVisible=true;
    },
    //添加或更新
    insertorupdate() {
      var _this = this;
      //JSON.stringify JSON 转 String
      // alert(JSON.stringify(this.form));
      this.$http
        .put("http://localhost:9999/mks/coupon/insertorupdate", _this.form)
        .then(function (response) {
            
          //  console.log(response);
          if (response.data.code == 2000) {
            //提示成功
            _this.$message({
              message: "恭喜你，操作成功",
              type: "success",
            });
            //_this.$message.success("恭喜你，添加成功");
            //关闭弹出框
            _this.updateFormVisible = false;
            
          }
          //重新加载数据
            _this.load();
        })
        .catch(function (error) {
          //  console.log(error);
          _this.$message.error("你错了。。。");
        });
    },
    //查询
    search() {
      console.log(`当前页`);
      this.load();
    },
    
    //刷新
    flush() {
      //刷新当前页
      location.reload();
    },
    //删除
    handleDelete(index, row) {
      var _this = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("http://localhost:9999/mks/coupon/deleteCoupon?id=" + row.id)
            .then((response) => {
              if (response.data.code == 2000) {
                _this.$message.success("删除成功!");
                _this.load();
              } else {
                _this.$message.error("删除失败!");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
</style>